<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>打字机</title>
		<style>
			* {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
			}

			#root {
				width: 500px;
				min-height: 100px;
				border: 1px solid #e9e9e9;
				background-color: #fff;
				box-shadow: 0px 0px 20px #ccc;
				margin: 10% auto 0;
				font-size: 24px;
				font-weight: 500;
				font-family: '宋体';
				padding: 30px;
				text-align: left;
				transition: all 0.3s;
			}
		</style>
	</head>

	<body>
		<div id="root"></div>

		<script>
			let timer = null;
			function writer(el, str = '美好如约而至!', delay = 100) {
				let index = 0;
				timer = setInterval(() => {
					const text = str.slice(0, index);
					el.innerHTML = text;
					index++;
					if (str.length + 1 === index) clearInterval(timer);
				}, delay);
			}

			writer(
				document.querySelector('#root'),
				`我回过头去看自己成长的道路，一天一天地观望，我站在路边上，双手插在风衣的兜里看到无数的人群从我身边面无表情地走过，偶尔有人停下来对我微笑，灿若桃花。我知道这些停留下来的人终究会成为我生命中的温暖，看到他们，我会想起不离不弃。`
			);
		</script>
	</body>
</html>
